<template>
	<view class='selectBox'>
			<u-checkbox-group :disabled="disabled" :wrap="wrap" @change="checkboxGroupChange">
				<u-checkbox
					v-model="item.checked" 
					v-for="(item, index) in dictOptions" :key="index" 
					:name="item.itemValue"
				>{{item.itemName}}</u-checkbox>
			</u-checkbox-group>
	</view>
</template>
<script>
/**
    <dictCheckboxTag v-model="model.diagnoses" :disabled="disabled" dictCode="disease_diagnosis"></dictCheckboxTag>
    
    import dictCheckboxTag from '@/components/dict/dictCheckboxTag.vue'
 */
	import { getDict, hasPropertyInMixedArray } from '@/utils/utils'
	export default {
		name: 'DictCheckboxTag',
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			dictCode: { // 必传 词典标识：如 sex
				type: String,
				default: ''
			},
			wrap: { // 是否占一行
				type: Boolean,
				default: true
			},
			value: {
				type: Array,
				default: () => []
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				checkList: [],
				dictOptions: [],
			}
		},
		watch: {
			dictCode: {
				immediate: true,
				handler() {
					this.initDictData()
				}
			},
			value: {
				immediate: true,
				handler(val) {
					// 回显
					this.dictOptions.forEach(obj => {
						if (val.includes(Number(obj.itemValue))) {
							this.$set(obj, 'checked', true)
						}
					})
				}
			}
		},
		created() {},
		methods: {
			initDictData() {
				this.dictOptions = getDict(this.dictCode,this)
				this.dictOptions.forEach(v => {
					this.$set(v, 'checked', false)
				})
			},
			checkboxGroupChange(e) {
				this.$emit('change', e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.selectBox{
		width: 90vw;
	}
	.u-checkbox{
		align-items: baseline;
	}
</style>
